<template>
	<view class="samplePage">
		<view class="address" @click="goAddress">
			<!-- <text class="addr">{{address.beizhu}}</text> -->
			<view class="tit">{{address.address}}</view>
			<view class="txt">
				<text>{{address.shrName}}</text><text>{{address.mobile}}</text>
			</view>
			<text v-if="!address.mobile">输入地址</text>
			<view class="right">
				<u-icon name="arrow-right" color="#000" size="16" bold></u-icon>
			</view>
			<image src="../../../static/img/sample_x.png" mode="widthFix" class="xian"></image>
		</view>
		<view class="cardBox">
			<image :src="fileServer+detail.productImg" mode="widthFix" class="img"></image>
			<view class="txt">
				<view class="tit">
					{{detail.productName}}
				</view>
				<view class="price">
					<view class="text">
						<view class="red">
							{{detail.mll}}%
						</view>
						<view class="t">
							毛利
						</view>
					</view>
					<view class="text">
						<view class="t">
							零售
						</view>
						<view class="red">
							{{detail.price}}
						</view>
					</view>
					<view class="text">
						<view class="t">
							产地{{detail.chandi}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<text class="label">备注：</text>
			<view class="right">
				<textarea name="beizhu" v-model="beizhu"  cols="30" rows="10" class="input" type="text" placeholder="请输入备注"></textarea>
			</view>
		</view>
		<view class="sned_btn" @click="send">提交申请</view>
		
		<!-- 提交成功 -->
		<view class="send_success" v-if="isSuccess">
			<view class="cont">
				<image class="img" src="../../../static/img/suc.png" mode="widthFix"></image>
				<text class="t">提交成功</text>
			</view>
			<view class="btns">
				<text class="btn1" @click="goIndex">返回首页</text>
				<text class="btn2" @click="goBack">完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				isSuccess:false,
				address:{},
				detail:{},
				beizhu:'',
			};
		},
		onLoad(options) {
			let _this = this;
			try{
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on('samplePage', (data) => {
					console.log(data)
					_this.detail = data;
				})
			}catch(e){
				//TODO handle the exception
			}
			
			this.$api.company.getAddress({}).then(res => {
				if(res.flag){
					let info = res.data;
					info.mobile = info.sjrMobile
					this.address = info||{};
					// address: "河南省郑州市中原区桐柏北路6号"
					// sjrMobile: "13333333333"
					// sjrName: "吴晓辉"
				}
			})
		},
		methods: {
			send(){
				console.log(this.address)
				if(!this.address.mobile){
					uni.showToast({
						title: '请先输入地址',
						icon: "none"
					})
					return false
				}
				
				let parmas = {...this.address};
				parmas.beizhu = this.beizhu;
				parmas.jsrId = this.detail.memberId;
				parmas.productId = this.detail.id;
				parmas.sqrId = uni.getStorageSync("memberId");
				this.$api.company.applyYangPin(parmas).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if(res.flag){
						this.isSuccess = true;
						// setTimeout(()=>{
						// 	uni.navigateBack()
						// },1000)
					}
				})
			},
			goAddress(){
				let _this = this;
				let address = this.address;
				uni.navigateTo({
					url:'/pages/shop/address/address',
					events:{
						addrEvent:function(data){
							console.log(data)
							_this.address = data;
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('addressPage', address)
					}
				})
			},
			goIndex(){
				uni.switchTab({
					url:'/pages/tabBar/index/index',
				})
			},
			goBack(){
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.samplePage {background-color: #F5F5F5;min-height: 100vh;
		.address{width: 750rpx;background: #FFFFFF;border-radius: 22rpx;padding: 15rpx 32rpx 32rpx;position: relative;
			.addr{color: #333333;font-size: 24rpx;}
			.tit{color: #333333;font-size: 32rpx;font-weight: bold;line-height: 44rpx;margin: 10rpx 0;}
			.txt{color: #333333;font-size: 26rpx;
				text{margin-right: 10rpx;}
			}
			.right{position: absolute;top: 0;bottom: 0;right: 32rpx;margin: auto;width: 36rpx;height: 36rpx;}
			.xian{position: absolute;left: 0;bottom: 0;right: 0;width: 750rpx;height: 20rpx;}
		}
		.cardBox{width: 750rpx;background: #FFFFFF;border-radius: 16rpx;padding: 36rpx 40rpx;margin-top: 16rpx;
			display: flex;
			.img{width: 172rpx;height: 172rpx;border-radius: 10rpx;}
			.txt{flex: 1;padding-left: 24rpx;display: flex;justify-content: space-between;flex-direction: column;
				.tit{color: #333333;font-size: 28rpx;line-height: 40rpx;font-weight: bold;}
				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 18rpx;
				
					.text {
						display: flex;
						align-items: center;
				
						.red {
							font-weight: bold;
							color: #E83149;
							font-size: 28rpx;
						}
				
						.t {
							font-size: 22rpx;
						}
				
						.t1 {
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.item{display: flex;min-height: 96rpx;background: #FFFFFF;border-radius: 20rpx;padding: 34rpx;margin-top:20rpx;
			.label{color: #777777;font-size: 28rpx;flex: 0 0 100rpx;}
			.right{flex: 1;padding-left: 30rpx;display: flex;justify-content: space-between;align-items: center;
				.input{flex: 1;height: 96rpx;color: #333333;font-size: 28rpx;}
				.map{padding-left: 30rpx;}
			}
		}
		.sned_btn{position: fixed;left:0;right:0;bottom:30rpx;margin:auto;width: 644rpx;height: 94rpx;line-height: 94rpx;background: #EC2424;border-radius: 47rpx;color: #FFFFFF;font-size: 32rpx;text-align: center;}
	
		.send_success{position: fixed;left: 0;top: 0;width: 750rpx;height: 100vh;background-color: #fff;z-index: 10;
			.cont{padding-top: 144rpx;text-align: center;
				.img{width: 156rpx;height: 150rpx;display:block;margin: 0 auto 20rpx;}
				.t{font-size: 36rpx;color: #333333;font-weight: bold;}
			}
			.btns{display: flex;align-items: center;justify-content: space-around;margin-top: 114rpx;padding: 0 60rpx;
				.btn1{color: #FF3142;font-size:26rpx;text-align:center;width: 196rpx;height: 68rpx;line-height: 64rpx;border-radius: 34rpx;border: 2rpx #F92A3C solid;display: block;}
				.btn2{color: #fff;font-size:26rpx;text-align:center;width: 196rpx;height: 68rpx;line-height: 68rpx;border-radius: 34rpx;display: block;background-color: #EC2424;}
			}
		}
	}
</style>